<template>
	<div class="sw_section_container">
		<div class="sw_query_form" v-if="$isHasAuth(topFrames)">
			<el-form size="small" inline>
				<template v-if="$isHasAuth(topButton)">
					<el-form-item>
						<el-date-picker v-model="timeRanges" v-bind="dateConfig"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-refresh-left" @click="handleResetQuery">重置</el-button>
					</el-form-item>
				</template>
				<el-form-item v-hasPermi="'1c11e442a25d440db9c26e408f2bd312'">
					<el-button type="warning" icon="el-icon-upload2" @click="handleExportData">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container">
			<el-table size="medium" ref="table" :data="tableData" stripe height="100%" class="data_table_wrapper">
				<el-table-column label="检索日期范围" align="center">
					<el-table-column label="起始日期" align="center" prop="startDate" width="110"></el-table-column>
					<el-table-column label="结束日期" align="center" prop="endDate" width="110"></el-table-column>
				</el-table-column>
				<el-table-column label="机时数" align="center" class-name="hour_color">
					<el-table-column label="总机时" align="center" prop="totalHour" width="100" class-name="hour_color"></el-table-column>
					<el-table-column label="累计总机时" align="center" prop="addupHour" width="110" class-name="hour_color"></el-table-column>
					<el-table-column label="中心内机时" align="center" prop="zxHour" width="110" class-name="hour_color"></el-table-column>
					<el-table-column label="中心外机时" align="center" class-name="hour_color">
						<el-table-column label="国内机时" align="center" class-name="hour_color">
							<el-table-column label="校内机时" align="center" prop="xnHour" width="90" class-name="hour_color"></el-table-column>
							<el-table-column label="校外机时" align="center" prop="xwHour" width="90" class-name="hour_color"></el-table-column>
							<el-table-column label="国内总机时" align="center" prop="gnHour" width="110" class-name="hour_color"></el-table-column>
						</el-table-column>
						<el-table-column label="国际机时" align="center" prop="gjHour" width="90" class-name="hour_color"></el-table-column>
						<el-table-column label="中心外总机时" align="center" prop="zxwHour" width="120" class-name="hour_color"></el-table-column>
						<el-table-column label="累计中心外总机时" align="center" prop="addupZxwHour" width="120" class-name="hour_color"></el-table-column>
						<el-table-column label="对中心外开放率" align="center" prop="zxwHourRatio" width="140" class-name="hour_color"></el-table-column>
					</el-table-column>
					<el-table-column label="对校外开放率" align="center" prop="xwHourRatio" width="120" class-name="hour_color"></el-table-column>
				</el-table-column>
				<el-table-column label="课题数" align="center" class-name="topic_color">
					<el-table-column label="总课题" align="center" prop="totalTopic" width="90" class-name="topic_color"></el-table-column>
					<el-table-column label="累计总课题" align="center" prop="addupTopic" width="110" class-name="topic_color"></el-table-column>
					<el-table-column label="中心内课题" align="center" prop="zxTopic" width="110" class-name="topic_color"></el-table-column>
					<el-table-column label="中心外课题" align="center" class-name="topic_color">
						<el-table-column label="国内课题" align="center" class-name="topic_color">
							<el-table-column label="校内课题" align="center" prop="xnTopic" width="90" class-name="topic_color"></el-table-column>
							<el-table-column label="校外课题" align="center" prop="xwTopic" width="90" class-name="topic_color"></el-table-column>
							<el-table-column label="国内总课题" align="center" prop="gnTopic" width="110" class-name="topic_color"></el-table-column>
						</el-table-column>
						<el-table-column label="国际课题" align="center" prop="gjTopic" width="90" class-name="topic_color"></el-table-column>
						<el-table-column label="中心外总课题" align="center" prop="zxwTopic" width="120" class-name="topic_color"></el-table-column>
					</el-table-column>
					<el-table-column label="普通课题" align="center" prop="ptTopic" width="90" class-name="topic_color"></el-table-column>
					<el-table-column label="开放基金课题" align="center" prop="kfTopic" width="120" class-name="topic_color"></el-table-column>
				</el-table-column>
				<el-table-column label="单位" align="center" class-name="depart_color">
					<el-table-column label="中心内" align="center" prop="zxUser" width="90" class-name="depart_color"></el-table-column>
					<el-table-column label="校内单位" align="center" prop="xnUser" width="90" class-name="depart_color"></el-table-column>
					<el-table-column label="校外单位" align="center" prop="xwUser" width="90" class-name="depart_color"></el-table-column>
					<el-table-column label="国际单位" align="center" prop="gjUser" width="90" class-name="depart_color"></el-table-column>
					<el-table-column label="累计用户单位" align="center" prop="addupUser" width="120" class-name="depart_color"></el-table-column>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
import moment from 'moment';
import mixins from '../mixins';
import { mapGetters } from 'vuex';
import { statInfoStat } from '@/api/business/stat';
import { exportDataToExcel } from '@/utils/exceljs';
const headerData = [
	{ level: 0, col: 0, rowspan: 1, colspan: 2, label: '检索日期范围' },
	{ level: 0, col: 2, rowspan: 1, colspan: 11, label: '机时数' },
	{ level: 0, col: 13, rowspan: 1, colspan: 10, label: '课题数' },
	{ level: 0, col: 23, rowspan: 1, colspan: 5, label: '单位' },
	{ level: 1, col: 5, rowspan: 1, colspan: 7, label: '中心外机时' },
	{ level: 1, col: 16, rowspan: 1, colspan: 5, label: '中心外课题' },
	{ level: 2, col: 5, rowspan: 1, colspan: 3, label: '国内机时' },
	{ level: 2, col: 16, rowspan: 1, colspan: 3, label: '国内课题' }
];
export default {
	mixins: [mixins],
	data() {
		return {};
	},
	computed: {
		topButton() {
			return ['502fd6044b144a439507e1bd3b89dca3'];
		},
		topFrames() {
			return [...this.topButton, '1c11e442a25d440db9c26e408f2bd312'];
		}
	},
	watch: {
		timeRanges(data) {
			if (!data) {
				this.$delete(this.queryData, 'startTime');
				this.$delete(this.queryData, 'endTime');
			} else {
				this.$set(this.queryData, 'startTime', data[0]);
				this.$set(this.queryData, 'endTime', data[1]);
			}
		}
	},
	mounted() {
		this.handleResetQuery();
	},
	methods: {
		//获取表格数据
		async getTableData() {
			let params = { ...this.queryData };
			let result = await statInfoStat(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				this.tableData = this.formatTableData(datas);
			}
		},

		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		//重置查询
		handleResetQuery() {
			let startTime = moment().subtract(1, 'months').startOf('months').format('YYYY-MM-DD HH:mm:ss');
			let endTime = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss');
			this.timeRanges = [startTime, endTime];
			this.$nextTick(() => {
				this.queryTableData();
			});
		},

		//格式化基础数据
		formatBaseData(arr) {
			let zxArrs = arr.filter((n) => n.name === '中心');
			let xnArrs = arr.filter((n) => n.name === '校内单位');
			let xwArrs = arr.filter((n) => n.name === '校外单位');
			let gjArrs = arr.filter((n) => n.name === '国际单位');
			let total = lodash.sumBy(arr, (n) => Number(n.scount || '0'));
			let zxNum = lodash.sumBy(zxArrs, (n) => Number(n.scount || '0'));
			let xnNum = lodash.sumBy(xnArrs, (n) => Number(n.scount || '0'));
			let xwNum = lodash.sumBy(xwArrs, (n) => Number(n.scount || '0'));
			let gjNum = lodash.sumBy(gjArrs, (n) => Number(n.scount || '0'));
			return { total, zx: zxNum, xn: xnNum, xw: xwNum, gj: gjNum };
		},

		//格式化机时数据
		formatHourData(data) {
			let datas = this.formatBaseData(data.hour);
			let obj = { zxHour: datas.zx, xnHour: datas.xn };
			obj['xwHour'] = datas.xw;
			obj['gjHour'] = datas.gj;
			obj['totalHour'] = datas.total;
			obj['gnHour'] = datas.xn + datas.xw;
			obj['zxwHour'] = datas.total - datas.zx;
			if (datas.total === 0) {
				obj['zxwHourRatio'] = '0%';
				obj['xwHourRatio'] = '0%';
			} else {
				obj['zxwHourRatio'] = Math.round((obj.zxwHour / datas.total) * 10000) / 100 + '%';
				obj['xwHourRatio'] = Math.round((obj.xwHour / datas.total) * 10000) / 100 + '%';
			}
			return obj;
		},

		//格式化课题数据
		formatTopicData(data) {
			let datas = this.formatBaseData(data.topic);
			let obj = { zxTopic: datas.zx, xnTopic: datas.xn };
			obj['xwTopic'] = datas.xw;
			obj['gjTopic'] = datas.gj;
			obj['totalTopic'] = datas.total;
			obj['gnTopic'] = datas.xn + datas.xw;
			obj['zxwTopic'] = datas.total - datas.zx;
			return obj;
		},

		//格式化课题类型
		formatTopicType(data) {
			let ptData = data.topictype.find((n) => n.name === '1');
			let kfData = data.topictype.find((n) => n.name === '2');
			return {
				ptTopic: !ptData ? '0' : Number(ptData.scount),
				kfTopic: !kfData ? '0' : Number(kfData.scount)
			};
		},

		//格式化用户单位数据
		formatUserData(data) {
			let obj = {};
			let datas = this.formatBaseData(data.user);
			obj['zxUser'] = datas.zx;
			obj['xnUser'] = datas.xn;
			obj['xwUser'] = datas.xw;
			obj['gjUser'] = datas.gj;
			return obj;
		},

		//格式化表格数据
		formatTableData(data) {
			let dataList = [{ startTime: this.queryData.startTime, endTime: this.queryData.endTime }];
			if (!dataList) return [];
			return dataList.map((item) => {
				let curHour = this.formatHourData(data);
				let curUser = this.formatUserData(data);
				let curTopic = this.formatTopicData(data);
				let curTopicType = this.formatTopicType(data);
				let obj = { addupHour: data.lhour, addupTopic: data.ltopic };
				obj['addupUser'] = data.userCount;
				obj['addupZxwHour'] = data.lzxoHour;
				obj['endDate'] = moment(item.endTime).format('YYYY-MM-DD');
				obj['startDate'] = moment(item.startTime).format('YYYY-MM-DD');
				obj = { ...obj, ...curHour, ...curTopic, ...curTopicType, ...curUser };
				return obj;
			});
		},

		//导出表格框架
		exportTableColumn(columns) {
			let levels = [0, 1, 2, 3];
			return levels.map((level) => {
				return columns.map((item, index) => {
					let label = item.level === level + 1 ? item.label : '';
					let infoData = headerData.find((n) => n.level === level && n.col === index);
					if (!label) {
						label = !infoData ? '' : infoData.label;
					}
					return label;
				});
			});
		},

		exportTableMerges(columns) {
			let merges = columns.map((n, i) => {
				return { row: n.level - 1, col: i, rowspan: n.rowSpan, colspan: n.colSpan };
			});
			let header = headerData.map((n) => ({ row: n.level, ...n }));
			return [...merges, ...header].map((n) => {
				delete n.label;
				delete n.level;
				return n;
			});
		},

		//导出配置
		exportConfig() {
			let config = { data: this.tableData };
			let columns = this.$refs['table'].columns;
			config['fields'] = columns.map((n) => n.property);
			config['merges'] = this.exportTableMerges(columns);
			config['headers'] = this.exportTableColumn(columns);
			config['columnsWidth'] = columns.map((n) => n.realWidth / 9);
			return config;
		},

		handleExportData() {
			let config = this.exportConfig();
			config['attrs'] = [
				{
					rowStart: 0,
					rowEnd: config.data.length + 3,
					colStart: 0,
					colEnd: config.fields.length - 1,
					attr: {
						height: 24,
						font: { bold: true },
						alignment: { vertical: 'middle', horizontal: 'center', wrapText: true },
						fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '99CCFF' } },
						border: { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } }
					}
				},
				{
					rowStart: config.data.length + 3,
					rowEnd: config.data.length + 4,
					colStart: 0,
					colEnd: config.fields.length - 1,
					attr: {
						font: { bold: false },
						fill: { fgColor: { argb: 'FFFFFF' } }
					}
				}
			];
			config['sheetName'] = '机时、课题、用户统计';
			exportDataToExcel(config, '机时、课题、用户统计.xls');
		}
	}
};
</script>

<style lang="scss" scoped>
.data_table_wrapper::v-deep {
	border-color: #666;
	&::before,
	&::after {
		background-color: #666;
	}
	th.el-table__cell {
		line-height: 1;
		font-size: 15px;
		border-color: #666;
		.cell {
			line-height: 1;
		}
	}
	td.el-table__cell {
		font-size: 16px;
		border-color: #666;
	}
	th.hour_color {
		background-color: #faecd8;
	}
	th.topic_color {
		background-color: #fde2e2;
	}
	th.depart_color {
		background-color: #e1f3d8;
	}
}
</style>
